extends layout
block content
    ul#test-ul
        li.js JavaScript
        li(name="book") Java & JavaScript
    ul#test-css
        li.lang.dy #[span JavaScript]
        li.lang    #[span Java]
        li.lang.dy #[span Python]
        li.lang    #[span Swift]
        li.lang.dy #[span Scheme]
    input#test-radio(type="radio" name="test" checked="" value="1")
    input#test-radio(type="radio" name="test" checked="checked" value="1")
    // 两个等价
    input#test-input(name="email" value="test")
    select#test-select(name="city")
        option(value="BJ" selected="") Beijing
        option(value="SH") Shanghai
        option(value="SZ") Shenzhen
    textarea#test-textarea Hello
append scripts
    script.
        //- ================================================================
        // text() 和 html()
        console.log($('#test-ul li[name=book]').text());  // 'Java & JavaScript'
        console.log($('#test-ul li[name=book]').html());  // 'Java &amp; JavaScript'
        $('#test-ul li').text('JS');  // 是不是两个节点都变成了 JS
        //- ================================================================
        // css(), 作用于 DOM 节点的 style 属性, jQuery 对象的所有方法都返回一个 jQuery 对象, 可以进行链式调用
        var div = $('#test-css');
        console.log(div.css('color'));  // rgb(0, 0, 0), 获取 CSS 属性
        div.css('color', '#336699');    // 设置 CSS 属性
        div.css('color', '');           // 清除 CSS 属性
        // 为了和 JavaScript 保持一致, CSS 属性可以用 'background-color' 和 'backgroundColor' 两种格式
        //- ================================================================
        // class() & hide() & show()
        var div = $('#test-css');
        div.hasClass('highlight');     // false,  class 是否包含 highlight
        div.addClass('highlight');     // 添加 highlight 这个 class
        div.removeClass('highlight');  // 删除 highlight 这个 class
        var a = $('#test-css');
        a.hide();  // 隐藏
        a.show();  // 显示
        // 隐藏 DOM 节点并未改变 DOM 树的结构, 它只影响 DOM 节点的显示, 这和删除 DOM 节点是不同的
        //- ================================================================
        // height(), width()
        console.log($(window).width());  // 800, 浏览器可视窗口大小
        $(window).height();              // 600
        $(document).width();             // 800, HTML 文档大小
        $(document).height();            // 3500
        var div = $('#test-css');
        div.width();          // 600, 某个 div 的大小
        div.height();         // 300
        div.width(400);       // 设置 CSS 属性 width: 400px, 是否生效要看 CSS 是否有效
        div.height('200px');  // 设置 CSS 属性 height: 200px, 是否生效要看 CSS 是否有效
        //- ================================================================
        // attr() 和 removeAttr(), prop(), is() 方法用于操作DOM节点的属性
        var div = $('#test-css');
        console.log(div.attr('name'));           // undefined, 属性不存在
        console.log(div.attr('name', 'Hello'));  // div 的 name 属性变为 'Hello'
        console.log(div.attr('name'));           // Hello
        console.log(div.removeAttr('name'));     // 删除name属性
        var radio = $('#test-radio');
        console.log(radio.attr('checked'));  // 'checked'
        console.log(radio.prop('checked'));  // true, attr() 和 prop() 对于属性 checked 处理有所不同, prop() 返回值更合理一些
        console.log(radio.is(':checked'));  // true, 用 is() 方法判断更好
        // 操作表单, 对于表单元素, jQuery 对象统一提供 val() 方法获取和设置对应的 value 属性
        var input = $('#test-input'), select = $('#test-select'), textarea = $('#test-textarea');
        console.log(input.val());      // 'test'
        input.val('abc@example.com');  // 文本框的内容已变为 abc@example.com
        console.log(select.val());     // 'BJ'
        select.val('SH');              // 选择框已变为 Shanghai
        console.log(textarea.val());   // 'Hello'
        textarea.val('Hi');            // 文本区域已更新为'Hi'
